<template>
  <div>
    <div>
      <el-form :inline="true" size="medium">
        <el-form-item clearable label="状态：">
          <el-select
            v-model="queryObj.order_status"
            placeholder="全部"
            clearable
          >
            <el-option
              v-for="(item, key) in orderStatus"
              :key="key"
              :label="item"
              :value="key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item clearable label="是否确认：">
          <el-select v-model="queryObj.is_affirm" placeholder="全部" clearable>
            <el-option
              v-for="(item, key) in confirmObj"
              :key="key"
              :label="item"
              :value="key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item clearable label="加盟商：">
          <el-select
            v-model="queryObj.alliance_id"
            placeholder="全部"
            clearable
          >
            <el-option
              v-for="(item, key) in allianceList"
              :key="key"
              :label="item"
              :value="key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item clearable label="门店：">
          <el-select v-model="queryObj.shop_id" placeholder="全部" clearable>
            <el-option
              v-for="(item, key) in shopList"
              :key="key"
              :label="item"
              :value="key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item clearable label="特殊订单：">
          <el-select v-model="queryObj.is_special" placeholder="全部" clearable>
            <el-option
              v-for="(item, key) in confirmObj"
              :key="key"
              :label="item"
              :value="key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系人">
          <el-input
            placeholder="联系人姓名/手机号"
            v-model="queryObj.buy_value"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="提交时间区间:">
          <el-date-picker
            value-format="timestamp"
            v-model="queryObj.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="订单编号/商品名称/产品编号"
            v-model="queryObj.query_value"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getMainListReset"
            ><i class="iconfont icon-search"></i>查询</el-button
          >
          <el-button type="primary" size="medium">下单</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="mytable">
      <el-table
        :data="mainList"
        tooltip-effect="dark"
        stripe
        style="width: 100%"
      >
        <el-table-column label="订单编号">
          <template slot-scope="scope">
            {{ scope.row.order_code }}
          </template>
        </el-table-column>
        <el-table-column label="下单时间">
          <template slot-scope="scope">
            {{ scope.row.init_time | formatDate("yyyy-MM-dd hh:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column label="线路名称">
          <template slot-scope="scope">
            {{ scope.row.commodity_name }}
          </template>
        </el-table-column>
        <el-table-column label="产品编号">
          <template slot-scope="scope">
            {{ scope.row.commodity_code }}
          </template>
        </el-table-column>
        <el-table-column label="出行人数">
          <template slot-scope="scope">
            {{ scope.row.adult_user_count + scope.row.child_user_count }}
          </template>
        </el-table-column>
        <el-table-column label="订单金额（元）">
          <template slot-scope="scope">
            {{ scope.row.original_price }}
          </template>
        </el-table-column>
        <el-table-column label="结算金额（元）">
          <template slot-scope="scope">
            {{ scope.row.buying_price / 100 }}
          </template>
        </el-table-column>
        <el-table-column label="加盟商">
          <template slot-scope="scope">
            {{ scope.row.alliance_name || '--' }}
          </template>
        </el-table-column>
        <el-table-column label="门店">
          <template slot-scope="scope">
            {{ scope.row.shop_name || '--' }}
          </template>
        </el-table-column>
        <el-table-column label="订单来源">
          <template slot-scope="scope">
            {{ orderSource[scope.row.order_type] }}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            {{ orderStatus[scope.row.order_status] }}
          </template>
        </el-table-column>
        <el-table-column label="确认状态">
          <template slot-scope="scope">
            {{ confirmObj[scope.row.is_affirm] }}
          </template>
        </el-table-column>
        <el-table-column label="特殊订单">
          <template slot-scope="scope">
            {{ confirmObj[scope.row.is_special] }}
            <el-button v-if="scope.row.is_special" type="text" @click="auditDetail(scope.row)">审核详情</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="goto(scope.row)">查看订单</el-button>
            <el-button type="text" v-if="scope.row.order_status===0" @click="closeOrder(scope.row)">关闭订单</el-button>
            <el-button type="text" v-if="scope.row.order_status===9" @click="del(scope.row)">删除订单</el-button>
            <el-button type="text" v-if="scope.row.order_status===9 && !scope.row.is_affirm" @click="confirmGo(scope.row)">确认出行</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagecon"
        background
        layout="total, sizes, prev, pager, next"
        @current-change="_mainList"
        @size-change="_mainList"
        :page-size.sync="page.limit"
        :page-sizes="pageSizeArr"
        :current-page.sync="page.page"
        :total="page.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import orderAPI from "api/orderManagement/orderAPI";
import { pageSizeArr, order_status, order_source } from "common/config/constConfig";
import config from "api/config";
// import { mapMutations } from "vuex";

export default {
  components: {},
  computed: {},
  data() {
    return {
      allianceList: [],
      shopList: [],
      orderStatus: order_status,
      orderSource: order_source,
      confirmObj: {
        0: "否",
        1: "是",
      },
      auditList: [],
      imgUrl: config.imgUrl,
      dialogTableVisible: false,
      pageSizeArr,
      queryObj: {},
      mainList: [],
      seriesList: [],
      comboList: [],
      page: {
        total: 0,
        page: 1,
        limit: 10,
      },
    };
  },
  methods: {
    // ...mapMutations("middleData", ["setMemberInfoObj"]),

    goto(row) {
      let data = { path: "/home/orderDetail" };
      if (row) {
        data.path += "?id=" + row.order_id;
      }
      this.$router.push(data);
    },
    // 查看审核
    auditDetail(row) {
      /// 
      console.log(row)
    },
    // 关闭订单
    async closeOrder(row) {
      // ,,
      await this.$confirm("是否确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
      await orderAPI('cancel', {order_id: row.order_id})
      this._caozuoAfter('关闭成功');
    },
    // 确认出行
    async confirmGo(row) {
      // ...
      await this.$confirm("您确定此订单已线下与用户沟通，是否确认此订单？", "确认出行", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
      await orderAPI('confirm', {order_id: row.order_id})
      this._caozuoAfter('操作成功');
    },
    // 删除的订单
    del(row) {
      this.$confirm("是否确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this._del(row);
      });
    },
    _del(row) {
      orderAPI("del", { order_id: row.order_id }).then((res) => {
        this._caozuoAfter(res.rMsg);
      });
    },
    // filter fun
    _caozuoAfter(msg) {
      this.dialogFormVisible = false;
      this.$message({
        message: msg,
        type: "success",
      });
      this._mainList();
    },
    getMainListReset() {
      this.page.page = 1;
      this._mainList();
    },
    // 获取
    _mainList() {
      let data = { ...this.queryObj };
      if (data.time && data.time.length > 0) {
        data.start_time = ~~(data.time[0] / 1000);
        data.end_time = ~~(data.time[1] / 1000);
      }
      data.pageInfo = { ...this.page };
      orderAPI("get", data).then((res) => {
        let pageInfo = res.pageInfo;
        this.page.total = pageInfo.Total;
        this.page.page = pageInfo.page;
        this.mainList = res.rData;
      });
    },
  },
  created() {
    this._mainList();
  },
};
</script>

<style lang="scss" scoped>
</style>
